<template>
  <div ref="container" class="Bedding text-white">
    <div v-if="token" class="edit-view">
      <div v-if="openEdit === 0" class="btn" @click="openEdit = 1">
        打开编辑
      </div>
      <div v-else class="btn" @click="closeEdit">取消编辑</div>
      <div v-if="openEdit === 1" class="btn yu" @click="openEdit = 2">
        预览效果
      </div>
      <div v-if="openEdit === 2" class="btn yu" @click="openEdit = 1">
        继续编辑
      </div>
      <div v-if="openEdit !== 0" class="btn save" @click="EidtSummerFun">
        保存编辑
      </div>
    </div>
    <div class="title-view">
      <div v-if="isEdit" class="text">
        <textarea class="textarea" v-model="summerData.TitleA"></textarea>
      </div>
      <div v-else class="text">
        {{ summerData.TitleA }}
      </div>
    </div>
    <div class="banner" :class="isEdit ? 'border' : ''">
      <div v-if="isEdit" class="upload-img-btn">
        <div class="upload-view">
          上传图片
          <input type="file" @change="handleFileUpload($event, 'PicA')" />
        </div>
        <div class="ts">*(上传横幅长图自适应高度)</div>
      </div>
      <img :src="summerData.PicAPath" alt="" />
    </div>
    <div class="img-view">
      <div class="left">
        <div v-if="isEdit" class="text">
          <textarea class="textarea" v-model="summerData.TitleB"></textarea>
        </div>
        <div v-else class="text">{{ summerData.TitleB }}</div>
      </div>
      <div class="right">
        <div class="top">
          <div class="img1" :class="isEdit ? 'border' : ''">
            <div v-if="isEdit" class="upload-img-btn">
              <div class="upload-view">
                上传图片
                <input type="file" @change="handleFileUpload($event, 'PicB')" />
              </div>
              <div class="ts">*(上传:宽315px,高472px)</div>
            </div>
            <img class="img" :src="summerData.PicBPath" alt="" />
          </div>
          <div class="img2-view" :class="isEdit ? 'border' : ''">
            <div v-if="isEdit" class="upload-img-btn">
              <div class="upload-view">
                上传图片
                <input type="file" @change="handleFileUpload($event, 'PicC')" />
              </div>
              <div class="ts">*(上传:宽400px,高587px)</div>
            </div>
            <img class="img2" :src="summerData.PicCPath" alt="" />
          </div>
        </div>
        <div class="bottom" :class="isEdit ? 'border' : ''">
          <div v-if="isEdit" class="upload-img-btn">
            <div class="upload-view">
              上传图片
              <input type="file" @change="handleFileUpload($event, 'PicD')" />
            </div>
            <div class="ts">*(上传:宽742px,高472px)</div>
          </div>
          <img class="img" :src="summerData.PicDPath" alt="" />
        </div>
      </div>
    </div>
    <div class="banner" :class="isEdit ? 'border' : ''">
      <div v-if="isEdit" class="upload-img-btn">
        <div class="upload-view">
          上传图片
          <input type="file" @change="handleFileUpload($event, 'PicE')" />
        </div>
        <div class="ts">*(上传横幅长图自适应高度)</div>
      </div>
      <img :src="summerData.PicEPath" alt="" />
    </div>
    <div class="title-view">
      <div v-if="isEdit" class="text">
        <textarea class="textarea" v-model="summerData.TitleC"></textarea>
      </div>
      <div v-else class="text">
        {{ summerData.TitleC }}
      </div>
    </div>
    <div class="img-last-view">
      <div class="left-img">
        <div v-if="isEdit" class="upload-img-btn">
          <div class="upload-view">
            上传图片
            <input type="file" @change="handleFileUpload($event, 'PicF')" />
          </div>
          <div class="ts">*(上传:宽960px,高1200px)</div>
        </div>
        <img
          :style="productStyle"
          class="img"
          :src="summerData.PicFPath"
          alt=""
        />
      </div>
      <div class="list-view" :style="productStyle">
        <!-- <div :style="{ width: cardStyle.w }" class="title">阳光普照精选</div> -->
        <div class="img-list">
          <div
            v-for="item in summerData.Goods"
            :key="item.Id"
            class="card"
            :style="cardStyle"
            @click="toPage('/detail/' + item.Id)"
          >
            <img :src="item.IndexPic" :alt="item.GoodsName" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import Cookies from "js-cookie";
import { EidtSummer, GetSummer, UploadFile } from "@/server";
import { useRouter } from "vue-router";
import { useAppStore } from "@/store/modules/user";
const token = Cookies.get("token");
const store = useAppStore();
const router = useRouter();
const container = ref<HTMLElement | null>(null);
const productStyle = ref({ width: "50%", height: "960px" });
const cardStyle = ref({ width: "345px", height: "435px", w: "20px" });
const summerData = ref({}) as any;
const openEdit = ref(0);
const closeEdit = () => {
  openEdit.value = 0;
  GetSummerFun();
};
const isEdit = computed(() => openEdit.value === 1);
const handleResize: ResizeObserverCallback = (entries) => {
  if (entries[0].target) {
    const containerWidth = entries[0].contentRect.width;
    const radio = 1199 / 960;
    productStyle.value = {
      width: containerWidth / 2 + "px",
      height: (containerWidth / 2) * radio + "px",
    };
    const r = 435 / 345;
    const w = containerWidth / 2;
    const w1 = w / 2 - w * 0.13;
    cardStyle.value = {
      width: w1 + "px",
      height: w1 * r + "px",
      w: w1 * 2 + 30 + "px",
    };
  }
};
/**
 * @description: 上传图片
 * @param {*} event
 * @return {*}
 * @author: cool panda
 */
const handleFileUpload = async (event: any, type: string) => {
  const file = event.target.files[0];
  let newimgdata = URL.createObjectURL(file);
  const fd = new FormData();
  fd.append("file", file);
  const res: any = await UploadFile(fd);
  if (res.Tag === 1) {
    const FileName = res.Data[0].FileName;
    summerData.value[type] = FileName;
    summerData.value[type + "Path"] = newimgdata;
    console.log(JSON.stringify(summerData.value));
  } else {
    store.error(res.Message); // 错误提示
  }
};
/**
 * @description: 页面跳转实例
 * @param {*} url
 * @return {*}
 * @author: cool panda
 */
const toPage = (url: string) => {
  window.open(url, "_blank");
};
const EidtSummerFun = async () => {
  const { TitleA, TitleB, TitleC, PicA, PicB, PicC, PicD, PicE, PicF } =
    summerData.value;
  const params = {
    TitleA,
    TitleB,
    TitleC,
    PicA,
    PicB,
    PicC,
    PicD,
    PicE,
    PicF,
    Operator: token,
  };
  const res: any = await EidtSummer(params);
  if (res.Tag === 1) {
    store.success(res.Message); // 错误提示
    closeEdit();
  } else {
    store.error(res.Message); // 错误提示
  }
};
const GetSummerFun = async () => {
  const res: any = await GetSummer({});
  if (res.Tag === 1) {
    summerData.value = res.Data;
    console.log(res.Data);
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetSummerFun();
onMounted(() => {
  const resizeObserver = new ResizeObserver(handleResize);
  if (container.value) {
    resizeObserver.observe(container.value);
  }

  return () => {
    if (container.value) {
      resizeObserver.unobserve(container.value);
    }
    resizeObserver.disconnect();
  };
});
</script>
<style lang="less" scoped>
.Bedding {
  width: 100%;
  .title-view {
    padding: 50px 0 30px;
    .text {
      width: 100%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 24px;
      margin-bottom: 30px;
      white-space: pre-wrap;
    }
  }
  .banner {
    position: relative;
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    &.border {
      border: 1px dashed #bab7b7;
    }

    img {
      width: 100%;
      object-fit: cover;
    }
  }
  .img-view {
    display: flex;
    padding: 40px 6%;
    .left {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      line-height: 28px;
      .text {
        width: 100%;
        white-space: pre-wrap;
      }
    }
    .right {
      width: 50%;
      .top {
        width: 100%;
        display: flex;
        .img1 {
          &.border {
            border: 1px dashed #bab7b7;
          }
          position: relative;
          min-width: 300px;
          min-height: 400px;
          padding: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .img2-view {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          &.border {
            border: 1px dashed #bab7b7;
          }
          min-width: 300px;
          min-height: 400px;
          .img2 {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
      .bottom {
        &.border {
          border: 1px dashed #bab7b7;
        }
        position: relative;
        margin-top: 30px;
        width: 100%;
        min-height: 100px;
        padding-right: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .img-last-view {
    display: flex;
    .left-img {
      position: relative;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        object-fit: cover;
      }
    }
    .list-view {
      width: 50%;
      background: #f5f5f5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title {
        width: 100%;
        text-align: left;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 30px;
      }
      .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .card {
          cursor: pointer;
          background: #ffffff;
          margin: 15px;
          padding: 50px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>
